<template>
  <view class="container">
	  <view class="title">选择日期</view>
	  <eyCalendar 
	  startText="到店"
	  endText="离店"
	  @setTime="event => time = event"
	  @confirmTime="confirmTime"/>
	  <view class="result">
		  当前选择的日期：<span style="color: red;">{{time}}</span>
	  </view>
	  <view class="result" style="margin-left: 10px;">
		  日期区间：<span style="color: red;">{{timeLine}}</span>
	  </view>
  </view>
</template>
<script>
	import eyCalendar from '@/components/ey-calendar.vue'
export default {
	components: {
		eyCalendar
	},
	data() {
		return {
			time: "暂无选择",
			timeLine: '暂无'
		}
	},
	methods: {
		confirmTime(e) {
			this.timeLine = `${e[0]}-${e[1]}`
		}
	}
}
</script>
<style lang="scss" scoped>
	.container{
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.title{
			width: 100%;
		}
		.result{
			margin-top: 10px;
		}
	}
</style>
